<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
        <div class="mb-2 logo" :width="isCollapse ? '64px' : '200px'">
          <template v-if="!isCollapse">
            <el-icon><MessageBox /></el-icon>
            <span style="margin-left: 10px">权限管理系统</span>
          </template>
          <template v-if="isCollapse">
            <el-icon><MessageBox /></el-icon>
          </template>
        </div>
        <el-menu
          :collapse="isCollapse"
          default-active="/generalIndex"
          background-color="#304156"
          class="el-menu-vertical-demo"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          @open="handleOpen"
          @close="handleClose"
          :router="true"
        >
          <el-menu-item index="/generalIndex">
            <el-icon><setting /></el-icon>
            <span>通用展示页</span>
          </el-menu-item>

          <el-menu-item index="/personalData">
            <el-icon><User /></el-icon>
            <span>个人信息</span>
          </el-menu-item>

          <template v-for="(item, index) in userMenuList">
            <template v-if="item.children">
              <el-sub-menu :index="item.path">
                <template #title>
                  <el-icon><setting /></el-icon>
                  <span>{{ item.meta.title }}</span>
                </template>
                <template v-for="(item2, index2) in item.children">
                  <el-menu-item :index="item.path + '/' + item2.path">
                    {{ item2.meta.title }}
                  </el-menu-item>
                </template>
              </el-sub-menu>
            </template>

            <template v-else>
              <el-menu-item :index="item.path">
                <el-icon><setting /></el-icon>
                <span>{{ item.meta.title }}</span>
              </el-menu-item>
            </template>
          </template>

          <!-- <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="settingUser">用户管理</el-menu-item>
            <el-menu-item index="settingRouter">路由管理</el-menu-item>
            <el-menu-item index="settingRole">角色管理</el-menu-item>
            <el-sub-menu index="1-4">
              <template #title>item four</template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span>Navigator Two</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <button class="menu-btn" @click="changeCollapse">
            <el-icon><Operation /></el-icon>
          </button>
          <div class="user-box">
            <el-avatar
              shape="square"
              :src="avatarUrl"
              class="user-header"
            ></el-avatar>
            <el-dropdown>
              <div class="el-dropdown-link">
                你好，{{ userInfo.name }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="User">个人信息</el-dropdown-item>
                  <el-dropdown-item divided :icon="Close" @click="logout"
                    >退出</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>

        <el-main class="main"><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  User,
  Close,
} from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { useUserStore } from "@/stores/model/user";

const userStore = useUserStore();
const isCollapse = ref(false);
const userInfo = ref(userStore.userInfo);
const avatarUrl =
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
const userMenuList = ref([]);

onMounted(() => {
  userMenuList.value = userStore.userMenuList;
});

const changeCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

const logout = () => {
  userStore.logout();
};
const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath);
};
</script>

<style scoped>
* {
  outline: none;
}
.sidebar {
  background-color: #304156;
  padding: 0;
  height: 100vh;
  color: #bfcbd9;
  box-shadow: 0 0 5px rgba(0, 0, 0, 1);
  transition: all 0.5s ease;
}
.el-menu-vertical-demo {
  border-right: none;
}
.logo {
  font-size: 16px;
  color: white;
  font-weight: 900;
  text-align: center;
  height: 70px;
  line-height: 70px;
  padding: 0px 10px 0px 10px;
  overflow: hidden;
  transition: all 0.5s ease;
}
.header {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.menu-btn {
  height: 60px !important;
  border: none;
  background-color: white;
  color: #424242;
  padding: 0;
  font-size: 22px;
  border-radius: 50%;
  width: 40px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.menu-btn:hover {
  color: black;
}
.user-box {
  height: 60px;
  line-height: 60px;
  float: right;
  margin-right: 15px;
  color: #424242;
}
.user-header {
  margin-right: 10px;
  margin-top: 10px;
  float: left;
}

.el-dropdown {
  cursor: pointer;
  height: 60px;
  line-height: 60px;
}

.main {
  width: 100%;
  height: 89vh;
  overflow: hidden;
  overflow-y: auto;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
